<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item class="pull-right">
                    <el-button-group>
                        <el-button plain size="small" icon="el-icon-circle-plus-outline" @click="handleAddRole" v-if="oauth('oauth/role/add')">添加</el-button>
                        <el-button plain size="small" icon="el-icon-delete" @click="handleDeleteRole" v-if="oauth('oauth/role/delete')">删除</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="listData" border v-loading="listLoading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"/>
            <el-table-column label="操作" width="65" v-if="oauth('oauth/role/edit')">
                <template scope="scope">
                    <el-button size="small" icon="el-icon-edit" @click="handleEdit(scope.row.id)"/>
                </template>
            </el-table-column>
            <el-table-column prop="id" width="60" label="ID" sortable/>
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="remark" label="备注"/>
        </el-table>

        <!--新增界面-->
        <el-dialog :title="isEdit?'编辑角色':'添加角色'" :close-on-click-modal="false" :visible.sync="formVisible" size="small">
            <el-form :model="formData" label-width="100px" :rules="formRules" size="small">
                <el-form-item label="角色名称：" prop="name">
                    <el-input v-model="formData.name" auto-complete="off"/>
                </el-form-item>
                <el-form-item label="备注说明：" prop="remark">
                    <el-input type="textarea" v-model="formData.remark"/>
                </el-form-item>
                <el-form-item label="权限资源：" prop="resourceTreeData">
                    <el-tree :data="resourceTreeData" :props="treeDefaultProps" :default-checked-keys="hasResource" show-checkbox node-key="id" ref="resourceTree"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click.native="submitForm" size="small">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    export default {
        mixins: [],

        data() {
            return {
                listData: [],
                listLoading: false,
                isEdit: false,
                formVisible: false,
                formData: {},
                formRules: {
                    email: [
                        {required: true, message: '请输入常用邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'}
                    ],
                    mp: [
                        {required: true, message: '请输入常用手机号', trigger: 'blur'},
                        {len: 11, message: '请输入正确的手机号', trigger: 'blur'}
                    ]
                },
                multipleSelection: [],
                resourceTreeData: [],
                hasResource: [],
                treeDefaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        created: function () {
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadResourceData: function () {
                let _this = this;
                this.httpPostRequest("/oauth/resource/findAll", {}, function (data) {
                    console.log(data);
                    _this.resourceTreeData = data;
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleDeleteRole: function () {
                let _this = this;
                this.$confirm('您确定要删除所选择的角色吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let roleIdArray = new Array(0);
                    _this.multipleSelection.forEach(function (data) {
                        roleIdArray.push(data.id);
                    });
                    console.log(roleIdArray)
                    this.httpPostRequest("/oauth/role/delete", roleIdArray, function () {
                        _this.loadData();
                    });
                });
            },
            submitForm: function () {
                let _this = this;
                this.httpPostRequest("/oauth/role/save", {'roleInfo': _this.formData, 'resourceIds': this.$refs.resourceTree.getCheckedKeys()}, function () {
                    _this.loadData();
                    _this.formVisible = false;
                });
            },
            handleEdit: function (roleId) {
                let _this = this;
                this.loadResourceData();
                this.httpPostRequest("/oauth/role/findById", {'roleId': roleId}, function (data) {
                    _this.formData = data.roleInfo;
                    _this.hasResource = data.hasResource;
                    _this.formVisible = true;
                    _this.isEdit = true;
                });
            },
            handleAddRole: function () {
                this.loadResourceData();
                this.formVisible = true;
                this.isEdit = false;
                this.formData = {};
                this.hasResource = [];
            },
            loadData: function () {
                let _this = this;
                _this.listLoading = true;
                this.httpPostRequest("/oauth/role/findAll", {}, function (data) {
                    _this.listLoading = false;
                    console.log(data);
                    _this.listData = data;
                });
            }
        },
        watch: {}
    }
</script>